<template>
  <view class="container">
    <!-- 背景图片 -->
    <image
        src="/static/bj-002.jpg"
        mode="aspectFill"
        class="bg-image">
    </image>

    <!-- 搜索栏 -->
    <view class="search-container">
      <view  @click="goBack">
      <image style="height: 55rpx;width: 150rpx;" src="/static/images/fanhui.png" ></image>
      </view>
      <uni-search-bar style="flex:1;" class="uni-mt-20" v-model="queryParams.idNumber"
                      radius="5" placeholder="输入身份证号查询"
                      clearButton="auto" cancelButton="none" @confirm="handleSearch" />
      <button class="search-button" @click="handleSearch">搜索</button>
    </view>

    <!-- 信息列表 -->
    <scroll-view
        scroll-y
        class="list-scroll"
        :style="{ height: scrollHeight + 'px' }"
    >
      <view class="list-container">
        <view
            v-for="(item, index) in studentList"
            :key="index"
            class="list-item"
        >
          <text class="info-text">姓名：{{ item.name }}</text>
          <text class="info-text">身份证：{{ item.idNumber | formatIdCard }}</text>
          <text class="info-text">年级：{{ item.grade }}</text>
          <text class="info-text">参赛组别：{{ item.competitionGroup }}</text>
          <text class="info-text">作品类型：{{ item.workType }}</text>
          <view class="button-container">
            <button class="edit-button" @click="handleEdit(item.id)">修改信息</button>
            <button class="adjust-button" @click="handleAdjust(item.id)">作品调整</button>
          </view>
          <view class="divider"></view>
        </view>

        <!-- 加载状态 -->
        <view class="loading-status">
          <text v-if="loading" class="loading-text">正在加载...</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {listByH5} from "@/api/activity/activity";

export default {
  data() {
    return {
      studentList: [],
      loading: false,
      queryParams: {
        idNumber: null,
      },
      scrollHeight: 20 // 新增滚动区域高度
    }
  },
  filters: {
    formatIdCard(val) {
      return val.replace(/(\d{4})\d{10}(\w{4})/, '$1****$2')
    }
  },
  methods: {
    handleSearch() {
      this.studentList = []
      //查询条件不能为空
      const idCardReg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      if (!idCardReg.test(this.queryParams.idNumber)) {
        uni.showToast({
          title: '请输入正确的身份证号',
          icon: 'none'
        });
        return;
      }
      this.loadData()
    },

    async loadData() {
      if (this.loading) return
      this.loading = true
      try {
        const res = await listByH5(this.queryParams)
        this.studentList = res.data // 直接赋值，确保所有数据一次性加载
      } finally {
        this.loading = false
        uni.stopPullDownRefresh()
      }
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/homePage'
      })
    },
    calculateScrollHeight() {
      const query = uni.createSelectorQuery().in(this)
      query.select('.search-container').boundingClientRect(data => {
        if (data) {
          const searchHeight = data.height
          const windowHeight = uni.getSystemInfoSync().windowHeight
          this.scrollHeight = windowHeight - searchHeight - 100 // 100为其他元素的边距
        } else {
          // 如果 .search-container 不存在，设置一个默认高度
          const windowHeight = uni.getSystemInfoSync().windowHeight
          this.scrollHeight = windowHeight - 100 // 200为其他元素的边距
        }
      }).exec()
    },
    // 新增方法：处理修改信息
    handleEdit(id) {
      uni.navigateTo({
        url: `/pages/saishi/editInfo?id=${encodeURIComponent(id)}`
      });
    },
    // 新增方法：处理作品调整
    handleAdjust(id) {
      uni.navigateTo({
        url: `/pages/saishi/adjustInfo?id=${encodeURIComponent(id)}`
      });
    }
  },
  onLoad(options) {
    // if (options.idNumber) {
    //   const idNumber = decodeURIComponent(options.idNumber); // 直接解码为字符串
    //   this.queryParams.idNumber = idNumber;
    //   this.loadData()
    // }
  },
  mounted() {
    this.calculateScrollHeight() // 计算滚动区域高度
    // this.loadData()
  },
}
</script>

<style lang="scss">
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 让背景在底层 */
}

.search-container {
  padding: 16rpx 32rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center; // 确保搜索框和按钮在同一行
  width: 90vw;
  max-width: 800px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 30px auto;
}

.list-scroll {
  width: 90vw;
  margin: 30px auto;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.list-container {
  margin: 0 auto;
  padding: 0 16rpx;

  .list-item {
    position: relative;
    padding: 32rpx 0;

    .info-text {
      display: block;
      font-size: 28rpx;
      line-height: 1.8;
      color: #333333;

      &:nth-child(2) {
        color: #666666;
      }

      &:last-child {
        color: #999999;
      }
    }

    .button-container {
      display: flex;
      justify-content: flex-end;
      margin-top: 16rpx;

      .edit-button, .adjust-button {
        margin-left: 16rpx;
        padding: 0 24rpx;
        height: 64rpx;
        line-height: 64rpx;
        font-size: 28rpx;
        border-radius: 32rpx;
      }

      .edit-button {
        background-color: #007AFF;
        color: white;
      }

      .adjust-button {
        background-color: #34C759;
        color: white;
      }
    }

    .divider {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1rpx;
      background: #EEEEEE;
    }
  }
}

.loading-status {
  padding: 32rpx 0;
  text-align: center;

  .loading-text {
    color: #999999;
    font-size: 26rpx;
  }

  .no-more-text {
    color: #CCCCCC;
    font-size: 24rpx;
  }
}

// 新增搜索按钮样式
.search-button {
  margin-right: 16rpx;
  padding: 0 24rpx;
  height: 64rpx;
  line-height: 64rpx;
  background-color: red;
  color: white;
  font-size: 28rpx;
  border-radius: 32rpx;
}
</style>